<template>
    <div>
        <div class="head">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">选课修改</span>
        </div>
        <el-card class="box-card">
            <div class="nav">
                <div style="display: flex;">
                    <el-button style="margin-right: 5px;" @click="add">
                        <i class="el-icon-plus"></i>
                        <span>创建</span>
                    </el-button>
                    <div
                        style="display: flex;flex-direction: column;justify-content: space-between; align-items: start;">
                        <el-checkbox v-model="selected" @change="changeSelect">允许学生选课</el-checkbox>
                        <el-checkbox v-model="graded" @change="changeGrade">允许教师打分</el-checkbox>
                    </div>
                </div>
                <div class="box-search">
                    <el-input placeholder="课程名" v-model="params.courseName"></el-input>
                    <el-input placeholder="学生名" v-model="params.studentName"></el-input>
                    <el-input placeholder="班级名" v-model="params.className"></el-input>
                    <el-button type="primary" @click="search">
                        <i class="el-icon-search"></i>
                        <span>搜索</span>
                    </el-button>
                </div>
            </div>
            <div class="pages">
                <el-pagination background layout="prev, pager, next" :total="totalPage * 10"
                    @current-change="handleCurrentChange" :current-page="currentPage">
                </el-pagination>
            </div>
            <div class="table">
                <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'padding': '7px', 'text-align': 'center' }" v-loading="loading">
                    <el-table-column prop="id" label="选课Id">
                    </el-table-column>
                    <el-table-column prop="courseName" label="课程名">
                    </el-table-column>
                    <el-table-column prop="studentName" label="学生名">
                    </el-table-column>
                    <el-table-column prop="className" label="学生班级">
                    </el-table-column>
                    <el-table-column prop="dailyScore" label="日常分">
                    </el-table-column>
                    <el-table-column prop="examScore" label="期末分">
                    </el-table-column>
                    <el-table-column prop="score" label="总分">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" @click="edit(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="30%">
            <edit :key="dialogFormVisible" @cancel="dialogFormVisible = false" @done="handleDone" :type="type" :id="id">
            </edit>
        </el-dialog>
    </div>
</template>

<script>
import {
    pageCount,
    page,
    mixinDelete,
    getSelect,
    getGrade,
    putSelect,
    putGrade,
} from '@/api/studentCourse.js'
import edit from './components/edit.vue'
import del from '@/mixin/del.js'
import dialog from '@/mixin/dialog.js'
import pages from '@/mixin/pages.js'
export default {
    mixins: [del, dialog, pages],
    components: { edit, },
    data() {
        return {
            params: {
                courseName: '',
                studentName: '',
                className: '',
            },
            checkList: ['允许学生选课', '允许教师打分'],
            selected: true,
            graded: true,
            mixinDelete,
            pageCount,
            page,
        }
    },
    methods: {
        async getChecked() {
            let ret1 = await getSelect()
            let ret2 = await getGrade()
            this.selected = ret1.data
            this.graded = ret2.data
        },
        changeSelect() {
            putSelect({ option: this.selected })
        },
        changeGrade() {
            putGrade({ option: this.graded })
        },
    },
    mounted() {
        this.getChecked()
    }
}
</script>

<style scoped lang="scss">
.head {
    margin-bottom: 5px;

    i {
        margin-right: 10px;
    }
}

.nav {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;

    .box-search {
        width: 560px;
        margin-right: 80px;
        display: flex;
        justify-content: space-between;

        .el-input {
            width: 140px;
        }
    }
}

.pages {
    text-align: center;
}
</style>